<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的收藏 - 查聊</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#4F46E5', // 主色调：紫色
            secondary: '#10B981', // 辅助色：绿色
            accent: '#F59E0B', // 强调色：橙色
            light: '#F3F4F6', // 浅色背景
            dark: '#1F2937', // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
    }
  </style>
  
  <style>
    /* 基础样式 */
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 标签样式 */
    .tag {
      @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    /* 骨架屏动画 */
    @keyframes shimmer {
      0% {
        background-position: -1000px 0;
      }
      100% {
        background-position: 1000px 0;
      }
    }
    
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 1000px 100%;
      animation: shimmer 2s infinite;
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800">
  <!-- PC端导航栏 -->
  <header class="hidden md:block fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="index.html" class="flex items-center space-x-2">
        <span class="text-primary text-2xl"><i class="fa fa-comments-o"></i></span>
        <span class="text-xl font-bold text-primary">查聊</span>
      </a>
      
      <!-- 搜索框 -->
      <div class="relative flex-1 max-w-xl mx-8">
        <input type="text" placeholder="搜索收藏的帖子..." 
               class="w-full pl-10 pr-4 py-2 rounded-full bg-light border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
        <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
          <i class="fa fa-search"></i>
        </span>
      </div>
      
      <!-- 导航链接 -->
      <nav class="flex items-center space-x-6">
        <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
        <a href="#" class="text-gray-600 hover:text-primary transition-colors">发现</a>
        <a href="new-post.html" class="px-4 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors flex items-center space-x-1">
          <i class="fa fa-pencil"></i>
          <span>发帖</span>
        </a>
        <a href="profile.html" class="relative">
          <img src="https://picsum.photos/seed/user1/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm">
        </a>
      </nav>
    </div>
  </header>

  <!-- 移动端顶部导航 -->
  <header class="md:hidden fixed top-0 left-0 right-0 bg-white shadow-sm z-30">
    <div class="flex items-center justify-between p-4">
      <a href="index.html" class="text-gray-700">
        <i class="fa fa-arrow-left text-lg"></i>
      </a>
      <span class="font-medium text-gray-900">我的收藏</span>
      <button id="filter-btn-mobile" class="text-gray-700">
        <i class="fa fa-filter text-lg"></i>
      </button>
    </div>
  </header>

  <!-- 主要内容区域 -->
  <main class="container mx-auto px-4 pt-24 pb-20 md:pt-28">
    <div class="flex flex-col lg:flex-row gap-6">
      <!-- 左侧边栏 (PC端) -->
      <aside class="hidden lg:block w-64 shrink-0">
        <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
          <!-- 用户信息 -->
          <div class="flex items-center space-x-3 mb-6">
            <img src="https://picsum.photos/seed/user1/60/60" alt="用户头像" class="w-12 h-12 rounded-full object-cover border-2 border-primary/20">
            <div>
              <h3 class="font-semibold text-gray-900">张三</h3>
              <p class="text-sm text-gray-500">@zhangsan</p>
            </div>
          </div>
          
          <!-- 导航菜单 -->
          <nav class="space-y-1">
            <a href="index.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-home w-5 text-center"></i>
              <span>首页</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-compass w-5 text-center"></i>
              <span>发现</span>
            </a>
            <a href="favorites.html" class="flex items-center space-x-3 p-3 rounded-lg bg-primary/10 text-primary font-medium transition-colors">
              <i class="fa fa-star w-5 text-center"></i>
              <span>我的收藏</span>
              <span class="ml-auto bg-primary/20 text-primary text-xs px-2 py-1 rounded-full">5</span>
            </a>
            <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-bell-o w-5 text-center"></i>
              <span>通知</span>
              <span class="ml-auto bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">3</span>
            </a>
            <a href="profile.html" class="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
              <i class="fa fa-user-o w-5 text-center"></i>
              <span>个人中心</span>
            </a>
          </nav>
          
          <!-- 收藏统计 -->
          <div class="mt-6 pt-6 border-t border-gray-100">
            <h4 class="text-sm font-medium text-gray-700 mb-3">收藏统计</h4>
            <div class="grid grid-cols-2 gap-3">
              <div class="bg-light rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-primary">5</p>
                <p class="text-xs text-gray-500 mt-1">帖子总数</p>
              </div>
              <div class="bg-light rounded-lg p-3 text-center">
                <p class="text-2xl font-bold text-secondary">3</p>
                <p class="text-xs text-gray-500 mt-1">技术类</p>
              </div>
            </div>
          </div>
        </div>
      </aside>

      <!-- 中间内容区 -->
      <div class="flex-1">
        <!-- 页面标题和筛选器 -->
        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6 bg-white rounded-xl shadow-sm p-5">
          <h1 class="text-2xl font-bold text-gray-900 mb-4 md:mb-0">我的收藏</h1>
          
          <div class="flex flex-wrap gap-2">
            <div class="relative">
              <select id="sort-select" class="appearance-none pl-4 pr-10 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all bg-white">
                <option value="newest">最新收藏</option>
                <option value="oldest">最早收藏</option>
                <option value="popular">热门程度</option>
              </select>
              <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none text-gray-500">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
            
            <div class="relative">
              <select id="category-select" class="appearance-none pl-4 pr-10 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all bg-white">
                <option value="all">全部分类</option>
                <option value="tech">技术讨论</option>
                <option value="life">生活分享</option>
                <option value="question">问答求助</option>
                <option value="resource">资源分享</option>
                <option value="career">职场经验</option>
              </select>
              <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none text-gray-500">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
            
            <button id="filter-btn" class="hidden md:flex items-center space-x-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
              <i class="fa fa-filter"></i>
              <span>筛选</span>
            </button>
            
            <button id="clear-all-btn" class="flex items-center space-x-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
              <i class="fa fa-trash-o"></i>
              <span>清空</span>
            </button>
          </div>
        </div>
        
        <!-- 收藏列表 -->
        <div class="space-y-5">
          <!-- 收藏项 1 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <div class="p-5">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/seed/user2/50/50" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                  <div>
                    <h3 class="font-medium text-gray-900">李小明</h3>
                    <p class="text-xs text-gray-500">技术专家 · 3天前</p>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="取消收藏">
                    <i class="fa fa-star text-yellow-400"></i>
                  </button>
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="分享">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
              
              <a href="post-detail.html" class="block">
                <h2 class="text-xl font-bold text-gray-900 mb-2 hover:text-primary transition-colors">2023年前端开发趋势分析：React、Vue和Angular的对比</h2>
                <p class="text-gray-600 mb-4 line-clamp-2">本文深入分析了2023年前端开发的主要趋势，重点比较了React、Vue和Angular三大框架的优缺点、适用场景以及市场占有率。通过实际案例和性能测试数据，帮助开发者选择最适合自己项目的前端框架...</p>
                
                <div class="flex items-center space-x-3 text-sm text-gray-500 mb-4">
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-eye"></i>
                    <span>2.3k</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-comment-o"></i>
                    <span>56</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-heart-o"></i>
                    <span>128</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-bookmark-o"></i>
                    <span>42</span>
                  </span>
                </div>
                
                <div class="flex flex-wrap gap-2">
                  <span class="tag bg-primary/10 text-primary">技术讨论</span>
                  <span class="tag bg-gray-100 text-gray-600">前端开发</span>
                  <span class="tag bg-gray-100 text-gray-600">React</span>
                  <span class="tag bg-gray-100 text-gray-600">Vue</span>
                </div>
              </a>
            </div>
          </div>
          
          <!-- 收藏项 2 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <div class="p-5">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/seed/user3/50/50" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                  <div>
                    <h3 class="font-medium text-gray-900">张小红</h3>
                    <p class="text-xs text-gray-500">UI设计师 · 1周前</p>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="取消收藏">
                    <i class="fa fa-star text-yellow-400"></i>
                  </button>
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="分享">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
              
              <a href="post-detail.html" class="block">
                <h2 class="text-xl font-bold text-gray-900 mb-2 hover:text-primary transition-colors">现代UI设计中的微交互：提升用户体验的小细节</h2>
                <p class="text-gray-600 mb-4 line-clamp-2">微交互是现代UI设计中不可或缺的一部分，它可以极大地提升用户体验和产品的易用性。本文分享了10个实用的微交互设计案例和实现技巧，帮助设计师和开发者创建更具吸引力的用户界面...</p>
                
                <div class="flex items-center space-x-3 text-sm text-gray-500 mb-4">
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-eye"></i>
                    <span>1.8k</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-comment-o"></i>
                    <span>42</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-heart-o"></i>
                    <span>95</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-bookmark-o"></i>
                    <span>36</span>
                  </span>
                </div>
                
                <div class="flex flex-wrap gap-2">
                  <span class="tag bg-accent/10 text-accent">生活分享</span>
                  <span class="tag bg-gray-100 text-gray-600">UI设计</span>
                  <span class="tag bg-gray-100 text-gray-600">用户体验</span>
                  <span class="tag bg-gray-100 text-gray-600">微交互</span>
                </div>
              </a>
            </div>
          </div>
          
          <!-- 收藏项 3 (带图片) -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <div class="p-5">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/seed/user4/50/50" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                  <div>
                    <h3 class="font-medium text-gray-900">王大力</h3>
                    <p class="text-xs text-gray-500">全栈开发者 · 2周前</p>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="取消收藏">
                    <i class="fa fa-star text-yellow-400"></i>
                  </button>
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="分享">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
              
              <a href="post-detail.html" class="block">
                <h2 class="text-xl font-bold text-gray-900 mb-2 hover:text-primary transition-colors">我的居家办公工位改造经验分享</h2>
                <p class="text-gray-600 mb-4 line-clamp-2">作为一名远程工作多年的开发者，我总结了一套适合程序员的居家办公工位改造方案。本文包含了显示器支架、人体工学椅、键盘鼠标推荐以及光线和声学优化建议，让你的工作环境更加舒适高效...</p>
                
                <!-- 图片预览 -->
                <div class="grid grid-cols-3 gap-2 mb-4">
                  <img src="https://picsum.photos/seed/workspace1/300/200" alt="工位照片1" class="w-full h-24 object-cover rounded-lg">
                  <img src="https://picsum.photos/seed/workspace2/300/200" alt="工位照片2" class="w-full h-24 object-cover rounded-lg">
                  <img src="https://picsum.photos/seed/workspace3/300/200" alt="工位照片3" class="w-full h-24 object-cover rounded-lg">
                </div>
                
                <div class="flex items-center space-x-3 text-sm text-gray-500 mb-4">
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-eye"></i>
                    <span>3.5k</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-comment-o"></i>
                    <span>87</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-heart-o"></i>
                    <span>215</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-bookmark-o"></i>
                    <span>78</span>
                  </span>
                </div>
                
                <div class="flex flex-wrap gap-2">
                  <span class="tag bg-accent/10 text-accent">生活分享</span>
                  <span class="tag bg-gray-100 text-gray-600">远程工作</span>
                  <span class="tag bg-gray-100 text-gray-600">居家办公</span>
                  <span class="tag bg-gray-100 text-gray-600">工作效率</span>
                </div>
              </a>
            </div>
          </div>
          
          <!-- 收藏项 4 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <div class="p-5">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/seed/user5/50/50" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                  <div>
                    <h3 class="font-medium text-gray-900">陈小雨</h3>
                    <p class="text-xs text-gray-500">数据分析师 · 3周前</p>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="取消收藏">
                    <i class="fa fa-star text-yellow-400"></i>
                  </button>
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="分享">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
              
              <a href="post-detail.html" class="block">
                <h2 class="text-xl font-bold text-gray-900 mb-2 hover:text-primary transition-colors">数据分析入门指南：从Excel到Python</h2>
                <p class="text-gray-600 mb-4 line-clamp-2">本文适合数据分析初学者，从Excel基础讲起，逐步过渡到Python数据分析库的使用。内容包括数据清洗、可视化、统计分析等实用技能，并通过真实案例帮助读者快速掌握数据分析的核心方法...</p>
                
                <div class="flex items-center space-x-3 text-sm text-gray-500 mb-4">
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-eye"></i>
                    <span>4.2k</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-comment-o"></i>
                    <span>124</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-heart-o"></i>
                    <span>356</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-bookmark-o"></i>
                    <span>156</span>
                  </span>
                </div>
                
                <div class="flex flex-wrap gap-2">
                  <span class="tag bg-secondary/10 text-secondary">资源分享</span>
                  <span class="tag bg-gray-100 text-gray-600">数据分析</span>
                  <span class="tag bg-gray-100 text-gray-600">Python</span>
                  <span class="tag bg-gray-100 text-gray-600">Excel</span>
                </div>
              </a>
            </div>
          </div>
          
          <!-- 收藏项 5 -->
          <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow">
            <div class="p-5">
              <div class="flex justify-between items-start mb-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/seed/user6/50/50" alt="作者头像" class="w-10 h-10 rounded-full object-cover">
                  <div>
                    <h3 class="font-medium text-gray-900">赵小亮</h3>
                    <p class="text-xs text-gray-500">技术总监 · 1个月前</p>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="取消收藏">
                    <i class="fa fa-star text-yellow-400"></i>
                  </button>
                  <button class="text-gray-400 hover:text-gray-600 transition-colors" title="分享">
                    <i class="fa fa-share-alt"></i>
                  </button>
                </div>
              </div>
              
              <a href="post-detail.html" class="block">
                <h2 class="text-xl font-bold text-gray-900 mb-2 hover:text-primary transition-colors">程序员如何高效准备技术面试？资深面试官的建议</h2>
                <p class="text-gray-600 mb-4 line-clamp-2">作为一名参与过数百次技术面试的面试官，我总结了一套行之有效的面试准备方法。本文涵盖了算法、系统设计、项目经验等多个方面的准备策略，以及面试过程中的技巧和注意事项，帮助程序员在面试中脱颖而出...</p>
                
                <div class="flex items-center space-x-3 text-sm text-gray-500 mb-4">
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-eye"></i>
                    <span>5.7k</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-comment-o"></i>
                    <span>213</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-heart-o"></i>
                    <span>489</span>
                  </span>
                  <span class="flex items-center space-x-1">
                    <i class="fa fa-bookmark-o"></i>
                    <span>245</span>
                  </span>
                </div>
                
                <div class="flex flex-wrap gap-2">
                  <span class="tag bg-secondary/10 text-secondary">职场经验</span>
                  <span class="tag bg-gray-100 text-gray-600">面试技巧</span>
                  <span class="tag bg-gray-100 text-gray-600">职业发展</span>
                  <span class="tag bg-gray-100 text-gray-600">程序员</span>
                </div>
              </a>
            </div>
          </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="mt-8 text-center">
          <button id="load-more-btn" class="px-6 py-2 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
            加载更多
          </button>
        </div>
      </div>

      <!-- 右侧边栏 (PC端) -->
      <aside class="hidden lg:block w-72 shrink-0">
        <!-- 收藏分类 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">收藏分类</h3>
          <div class="space-y-2">
            <button class="w-full text-left flex items-center justify-between p-3 rounded-lg bg-primary/10 text-primary font-medium transition-colors">
              <span>全部分类</span>
              <span class="bg-primary/20 text-primary text-xs px-2 py-1 rounded-full">5</span>
            </button>
            <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
              <span>技术讨论</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">3</span>
            </button>
            <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
              <span>生活分享</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">2</span>
            </button>
            <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
              <span>问答求助</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
            </button>
            <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
              <span>资源分享</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
            </button>
            <button class="w-full text-left flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors">
              <span>职场经验</span>
              <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full">0</span>
            </button>
          </div>
        </div>
        
        <!-- 收藏标签云 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">热门标签</h3>
          <div class="flex flex-wrap gap-2">
            <button class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full hover:bg-primary/20 transition-colors">
              #前端开发
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #React
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #UI设计
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #数据分析
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #Python
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #远程工作
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #面试技巧
            </button>
            <button class="px-3 py-1 bg-gray-100 text-gray-600 text-sm rounded-full hover:bg-gray-200 transition-colors">
              #用户体验
            </button>
          </div>
        </div>
        
        <!-- 你可能感兴趣 -->
        <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
          <h3 class="font-semibold text-gray-900 mb-4">你可能感兴趣</h3>
          <div class="space-y-4">
            <a href="post-detail.html" class="flex items-start space-x-3 group">
              <div class="shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://picsum.photos/seed/interest1/200/200" alt="帖子缩略图" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
              </div>
              <div class="flex-1">
                <h4 class="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">10个提升JavaScript代码质量的实用技巧</h4>
                <p class="text-xs text-gray-500 mt-1">2.1k 阅读 · 3天前</p>
              </div>
            </a>
            <a href="post-detail.html" class="flex items-start space-x-3 group">
              <div class="shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://picsum.photos/seed/interest2/200/200" alt="帖子缩略图" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
              </div>
              <div class="flex-1">
                <h4 class="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">从零开始学习Docker：容器化你的应用</h4>
                <p class="text-xs text-gray-500 mt-1">3.4k 阅读 · 5天前</p>
              </div>
            </a>
            <a href="post-detail.html" class="flex items-start space-x-3 group">
              <div class="shrink-0 w-16 h-16 bg-gray-100 rounded-lg overflow-hidden">
                <img src="https://picsum.photos/seed/interest3/200/200" alt="帖子缩略图" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
              </div>
              <div class="flex-1">
                <h4 class="text-sm font-medium text-gray-900 line-clamp-2 group-hover:text-primary transition-colors">CSS Grid布局完全指南：从入门到精通</h4>
                <p class="text-xs text-gray-500 mt-1">4.7k 阅读 · 1周前</p>
              </div>
            </a>
          </div>
        </div>
        
        <!-- 广告横幅 -->
        <div class="bg-gradient-to-r from-primary to-purple-600 rounded-xl shadow-sm p-5 text-white">
          <h3 class="font-bold text-lg mb-2">查聊Pro会员</h3>
          <p class="text-sm text-white/80 mb-4">解锁高级收藏管理功能，分类更精细，查找更快速</p>
          <button class="w-full py-2 bg-white text-primary font-medium rounded-lg hover:bg-opacity-90 transition-colors">
            立即升级
          </button>
        </div>
      </aside>
    </div>
  </main>

  <!-- 移动端底部导航栏 -->
  <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 md:hidden z-30">
    <div class="flex items-center justify-around h-16">
      <a href="index.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-compass text-xl"></i>
        <span class="text-xs mt-1">发现</span>
      </a>
      <a href="new-post.html" class="flex flex-col items-center justify-center">
        <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center -mt-4 shadow-lg">
          <i class="fa fa-plus text-white text-xl"></i>
        </div>
      </a>
      <a href="favorites.html" class="flex flex-col items-center justify-center text-primary">
        <i class="fa fa-star text-xl"></i>
        <span class="text-xs mt-1">收藏</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center justify-center text-gray-500">
        <i class="fa fa-user-o text-xl"></i>
        <span class="text-xs mt-1">我的</span>
      </a>
    </div>
  </nav>

  <!-- 筛选弹窗 (默认隐藏) -->
  <div id="filter-modal" class="fixed inset-0 bg-black/50 flex items-end justify-center z-50 hidden">
    <div class="bg-white rounded-t-2xl w-full max-w-md max-h-[80vh] overflow-y-auto">
      <div class="p-5 border-b border-gray-100 flex items-center justify-between">
        <h3 class="font-bold text-lg text-gray-900">筛选收藏</h3>
        <button id="close-filter-btn" class="text-gray-500 hover:text-gray-700">
          <i class="fa fa-times text-lg"></i>
        </button>
      </div>
      
      <div class="p-5 space-y-6">
        <!-- 时间筛选 -->
        <div>
          <h4 class="font-medium text-gray-900 mb-3">收藏时间</h4>
          <div class="grid grid-cols-2 gap-3">
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              全部时间
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              最近一周
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              最近一月
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              最近三月
            </button>
          </div>
        </div>
        
        <!-- 分类筛选 -->
        <div>
          <h4 class="font-medium text-gray-900 mb-3">帖子分类</h4>
          <div class="grid grid-cols-2 gap-3">
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              全部分类
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              技术讨论
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              生活分享
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              问答求助
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              资源分享
            </button>
            <button class="py-2 px-4 border border-gray-200 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
              职场经验
            </button>
          </div>
        </div>
        
        <!-- 包含图片 -->
        <div class="flex items-center justify-between">
          <span class="font-medium text-gray-900">只看有图的</span>
          <div class="relative inline-block w-10 h-6">
            <input type="checkbox" class="opacity-0 w-0 h-0">
            <span class="absolute cursor-pointer inset-0 bg-gray-200 rounded-full transition-all before:absolute before:h-5 before:w-5 before:left-0.5 before:bottom-0.5 before:bg-white before:rounded-full before:transition-all"></span>
          </div>
        </div>
      </div>
      
      <!-- 按钮 -->
      <div class="p-5 border-t border-gray-100 flex space-x-3">
        <button id="reset-filter-btn" class="flex-1 py-3 border border-gray-200 rounded-lg text-gray-700 font-medium hover:bg-gray-50 transition-colors">
          重置
        </button>
        <button id="apply-filter-btn" class="flex-1 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors">
          确定
        </button>
      </div>
    </div>
  </div>

  <!-- 确认弹窗 (默认隐藏) -->
  <div id="confirm-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4">
      <h3 class="text-lg font-bold text-gray-900 mb-2 text-center">确认操作</h3>
      <p class="text-gray-600 mb-6 text-center" id="confirm-message">
        你确定要清空所有收藏吗？此操作不可撤销。
      </p>
      <div class="flex space-x-3">
        <button id="cancel-confirm-btn" class="flex-1 px-4 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
          取消
        </button>
        <button id="ok-confirm-btn" class="flex-1 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
          确认
        </button>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 筛选弹窗控制
    const filterBtn = document.getElementById('filter-btn');
    const filterBtnMobile = document.getElementById('filter-btn-mobile');
    const filterModal = document.getElementById('filter-modal');
    const closeFilterBtn = document.getElementById('close-filter-btn');
    const applyFilterBtn = document.getElementById('apply-filter-btn');
    const resetFilterBtn = document.getElementById('reset-filter-btn');
    
    function openFilterModal() {
      if (filterModal) {
        filterModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden'; // 防止背景滚动
      }
    }
    
    function closeFilterModal() {
      if (filterModal) {
        filterModal.classList.add('hidden');
        document.body.style.overflow = 'auto'; // 恢复背景滚动
      }
    }
    
    if (filterBtn) {
      filterBtn.addEventListener('click', openFilterModal);
    }
    
    if (filterBtnMobile) {
      filterBtnMobile.addEventListener('click', openFilterModal);
    }
    
    if (closeFilterBtn) {
      closeFilterBtn.addEventListener('click', closeFilterModal);
    }
    
    if (applyFilterBtn) {
      applyFilterBtn.addEventListener('click', function() {
        // 应用筛选逻辑
        alert('筛选条件已应用');
        closeFilterModal();
      });
    }
    
    if (resetFilterBtn) {
      resetFilterBtn.addEventListener('click', function() {
        // 重置筛选条件
        alert('筛选条件已重置');
      });
    }
    
    // 点击弹窗外部关闭
    if (filterModal) {
      filterModal.addEventListener('click', function(e) {
        if (e.target === filterModal) {
          closeFilterModal();
        }
      });
    }
    
    // 确认弹窗控制
    const clearAllBtn = document.getElementById('clear-all-btn');
    const confirmModal = document.getElementById('confirm-modal');
    const confirmMessage = document.getElementById('confirm-message');
    const cancelConfirmBtn = document.getElementById('cancel-confirm-btn');
    const okConfirmBtn = document.getElementById('ok-confirm-btn');
    
    function openConfirmModal(message) {
      if (confirmMessage) {
        confirmMessage.textContent = message;
      }
      if (confirmModal) {
        confirmModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden'; // 防止背景滚动
      }
    }
    
    function closeConfirmModal() {
      if (confirmModal) {
        confirmModal.classList.add('hidden');
        document.body.style.overflow = 'auto'; // 恢复背景滚动
      }
    }
    
    if (clearAllBtn) {
      clearAllBtn.addEventListener('click', function() {
        openConfirmModal('你确定要清空所有收藏吗？此操作不可撤销。');
      });
    }
    
    if (cancelConfirmBtn) {
      cancelConfirmBtn.addEventListener('click', closeConfirmModal);
    }
    
    if (okConfirmBtn) {
      okConfirmBtn.addEventListener('click', function() {
        // 执行清空收藏操作
        alert('所有收藏已清空');
        closeConfirmModal();
        
        // 这里可以添加实际的清空逻辑
      });
    }
    
    // 点击弹窗外部关闭
    if (confirmModal) {
      confirmModal.addEventListener('click', function(e) {
        if (e.target === confirmModal) {
          closeConfirmModal();
        }
      });
    }
    
    // 取消收藏按钮点击事件
    const uncollectButtons = document.querySelectorAll('.fa-star.text-yellow-400').forEach(button => {
      button.parentElement.addEventListener('click', function() {
        openConfirmModal('你确定要取消收藏此帖子吗？');
      });
    });
    
    // 排序和分类选择事件
    const sortSelect = document.getElementById('sort-select');
    const categorySelect = document.getElementById('category-select');
    
    if (sortSelect) {
      sortSelect.addEventListener('change', function() {
        alert(`已按${this.options[this.selectedIndex].text}排序`);
      });
    }
    
    if (categorySelect) {
      categorySelect.addEventListener('change', function() {
        alert(`已筛选${this.options[this.selectedIndex].text}分类`);
      });
    }
    
    // 加载更多按钮点击事件
    const loadMoreBtn = document.getElementById('load-more-btn');
    
    if (loadMoreBtn) {
      loadMoreBtn.addEventListener('click', function() {
        // 模拟加载中状态
        this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>加载中...';
        this.disabled = true;
        
        // 模拟加载延迟
        setTimeout(() => {
          alert('没有更多收藏了');
          this.innerHTML = '没有更多了';
          this.classList.add('bg-gray-100', 'cursor-not-allowed');
        }, 1500);
      });
    }
    
    // 分类按钮点击事件
    const categoryButtons = document.querySelectorAll('.bg-white.rounded-xl.shadow-sm.p-5.mb-6 button');
    categoryButtons.forEach(button => {
      button.addEventListener('click', function() {
        // 移除所有按钮的选中状态
        categoryButtons.forEach(btn => {
          btn.classList.remove('bg-primary/10', 'text-primary', 'font-medium');
          btn.classList.add('hover:bg-gray-50', 'text-gray-700');
        });
        
        // 添加当前按钮的选中状态
        this.classList.remove('hover:bg-gray-50', 'text-gray-700');
        this.classList.add('bg-primary/10', 'text-primary', 'font-medium');
        
        // 获取分类名称
        const categoryName = this.querySelector('span:first-child').textContent;
        alert(`已筛选${categoryName}分类`);
      });
    });
    
    // 热门标签点击事件
    const tagButtons = document.querySelectorAll('.px-3.py-1.rounded-full');
    tagButtons.forEach(button => {
      button.addEventListener('click', function() {
        // 移除所有标签的选中状态
        tagButtons.forEach(btn => {
          btn.classList.remove('bg-primary/10', 'text-primary');
          btn.classList.add('bg-gray-100', 'text-gray-600', 'hover:bg-gray-200');
        });
        
        // 添加当前标签的选中状态
        this.classList.remove('bg-gray-100', 'text-gray-600', 'hover:bg-gray-200');
        this.classList.add('bg-primary/10', 'text-primary');
        
        // 获取标签名称
        const tagName = this.textContent.trim();
        alert(`已筛选${tagName}标签`);
      });
    });
  </script>
</body>
</html>